<template>
  <div>
    <form @submit.prevent="submitForm">
      <div>
        <label for="username">用户名:</label>
        <input type="text" id="username" v-model="form.username" required>
      </div>
      <div>
        <label for="email">电子邮件:</label>
        <input type="email" id="email" v-model="form.email" required>
      </div>
      <div>
        <label for="password">密码:</label>
        <input type="password" id="password" v-model="form.password" required>
      </div>
      <div>
        <label for="bio">个人简介:</label>
        <textarea id="bio" v-model="form.bio"></textarea>
      </div>
      <div>
        <label for="image">头像链接:</label>
        <input type="text" id="image" v-model="form.image">
      </div>
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script setup>
import axios from 'axios'; // 导入 Axios 库，用于发送 HTTP 请求
import { ref } from 'vue'; // 导入 Vue 3 的 ref 函数，用于创建响应式数据

// 创建一个响应式对象来存储表单数据
const form = ref({
  username: '', // 用户名字段，默认为空字符串
  email: '', // 电子邮件字段，默认为空字符串
  password: '', // 密码字段，默认为空字符串
  bio: '', // 个人简介字段，默认为空字符串
  image: '' // 头像链接字段，默认为空字符串
});

// 定义一个异步函数来处理表单提交
const submitForm = async () => {
  try {
    // 使用 Axios 发送 POST 请求到服务器的 /api/users 端点
    const response = await axios.post('/api/users', {
      username: form.value.username, // 将用户名字段的数据发送到服务器
      email: form.value.email, // 将电子邮件字段的数据发送到服务器
      password: form.value.password, // 将密码字段的数据发送到服务器
      bio: form.value.bio, // 将个人简介字段的数据发送到服务器
      image: form.value.image // 将头像链接字段的数据发送到服务器
    });

    // 注册成功后的处理
    // 这里可以根据实际需求添加更多的处理逻辑，例如重定向到主页或显示成功消息
    console.log("注册成功:", response.data); // 打印服务器返回的成功响应数据
  } catch (error) {
    // 注册失败后的处理
    console.error("注册新用户失败:", error); // 打印错误信息到控制台，以便调试
  }
};
</script>
